<template>
  <div id="app">
    <div id="container"></div>
  </div>
</template>

<script>
  import G6 from "@antv/g6"

  export default {
    name: "gpolyline",
    props: ['nodeData'],
    data() {
      return {
        graph: ""
      }
    },
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        console.log("initChart")
        let _this = this
        G6.registerNode(
          "wxwRect",
          {
            draw(cfg, group) {
              const color = cfg.error ? "#ffd4d2" : "#d0e0f6"
              const strokeColor = cfg.error ? "#ffc1be" : "#b3d8ee"
              const isKeyNode = cfg.isKeyNode
              const keyIcon = cfg.open ? "\ue75e" : "\ue742"
              const title = ['并行度', '接受数据量', '发送数据量', 'watermark', '背压']
              const backPressureStatus = cfg.backPressureStatus === 0 ? '#67C23A' : cfg.backPressureStatus === 1 ? '#E6A23C' : '#F56C6C'
              const r = 2
              const shape = group.addShape("rect", {
                attrs: {
                  x: 0,
                  y: 0,
                  width: 200,
                  stroke: strokeColor,
                  height: 110,
                  fill: color,
                  radius: [r, r, 0, 0]
                },
                name: "container-box"
              })
              if (isKeyNode) {
                group.addShape("text", {
                  attrs: {
                    x: 180,
                    y: 65,
                    fontFamily: 'iconfont',
                    text: keyIcon,
                    fill: "#909399",
                    fontSize: 22,
                    cursor: 'pointer'
                  },
                  name: "fold-item-btn"
                })
              }
              title.forEach((item, index) => {
                group.addShape("text", {
                  attrs: {
                    textBaseline: "top",
                    y: 10 + index * 20,
                    x: 15,
                    text: item + cfg.name,
                    fill: "#595959"
                  },
                  name: `index-title`
                })
                if (index < 4) {
                  group.addShape("text", {
                    attrs: {
                      fontFamily: 'iconfont',
                      y: 24 + index * 20,
                      x: 150,
                      fontSize: 18,
                      text: '\ue602',
                      fill: "#595959",
                      cursor: 'pointer'
                    },
                    name: `chart-icon-${index}`
                  })
                }
                //backPressureStatus
                if (index === 4) {
                  group.addShape("text", {
                    attrs: {
                      fontFamily: 'iconfont',
                      y: 107,
                      x: 80,
                      fontSize: 22,
                      text: '\ue603',
                      opacity: 0.7,
                      fill: backPressureStatus
                    },
                    name: `chart-icon-${index}`
                  })
                }
              })
              return shape
            },
            afterDraw(cfg, group) {
              const containerBox = group.find(
                element => element.get("name") === "container-box"
              )

              const foldItemBtn = group.find(
                element => element.get("name") === "fold-item-btn"
              )

              const chartIcon0 = group.find(
                element => element.get("name") === "chart-icon-0"
              )

              const chartIcon1 = group.find(
                element => element.get("name") === "chart-icon-1"
              )

              const chartIcon2 = group.find(
                element => element.get("name") === "chart-icon-2"
              )

              const chartIcon3 = group.find(
                element => element.get("name") === "chart-icon-3"
              )

              const chartIcon4 = group.find(
                element => element.get("name") === "chart-icon-4"
              )

              if (containerBox) {
                containerBox.on("click", e => {
                  _this.clickNode(e, cfg, group)
                  console.log('containerBox', cfg, group)
                })
              }

              if (foldItemBtn) {
                foldItemBtn.on("click", e => {
                  _this.foldItem(e, cfg, group)
                })
              }

              // 点击并行度表格
              if (chartIcon0) {
                chartIcon0.on("click", e => {
                  _this.openChart0(e, cfg, group)
                  console.log('chartIcon0', cfg, group)
                })

                chartIcon0.on("mouseenter", e => {
                  chartIcon0.attr('fill', '#409EFF')
                })
                chartIcon0.on("mouseleave", e => {
                  chartIcon0.attr('fill', '#595959')
                })
              }

              // 点击接受数据量表格
              if (chartIcon1) {
                chartIcon1.on("click", e => {
                  _this.openChart1(e, cfg, group)
                  console.log('chartIcon1', cfg, group)
                })

                chartIcon1.on("mouseenter", e => {
                  chartIcon1.attr('fill', '#409EFF')
                })
                chartIcon1.on("mouseleave", e => {
                  chartIcon1.attr('fill', '#595959')
                })
              }

              // 点击发送数据量
              if (chartIcon2) {
                chartIcon2.on("click", e => {
                  _this.openChart2(e, cfg, group)
                  console.log('chartIcon2', cfg, group)
                })

                chartIcon2.on("mouseenter", e => {
                  chartIcon2.attr('fill', '#409EFF')
                })
                chartIcon2.on("mouseleave", e => {
                  chartIcon2.attr('fill', '#595959')
                })

              }

              // 点击watermark
              if (chartIcon3) {
                chartIcon3.on("click", e => {
                  _this.openChart3(e, cfg, group)
                  console.log('chartIcon3', cfg, group)
                })

                chartIcon3.on("mouseenter", e => {
                  chartIcon3.attr('fill', '#409EFF')
                })
                chartIcon3.on("mouseleave", e => {
                  chartIcon3.attr('fill', '#595959')
                })
              }

              if (chartIcon4) {
                chartIcon4.on("mouseenter", e => {
                  chartIcon4.attr('opacity', 1)
                })
                chartIcon4.on("mouseleave", e => {
                  chartIcon4.attr('opacity', 0.7)
                })
              }
            }
          },
          "single-node"
        )
        const width = document.getElementById("container").scrollWidth || 1000
        const height = document.getElementById("container").scrollHeight || 600
        this.graph = new G6.Graph({
          container: "container",
          width,
          height,
          //fitCenter: true,
          animate: true,
          animateCfg: {
            duration: 300, // Number，一次动画的时长
            easing: 'easeQuad', // String，动画函数
          },
          defaultNode: {
            type: "wxwRect",
            style: {
              lineWidth: 2
            },
            anchorPoints: [
              [0, 0.5],
              [1, 0.5]
            ]
          },
          defaultEdge: {
            type: "cubic-horizontal",
            size: 1,
            color: "#e2e2e2",
            style: {
              endArrow: true
            }
          },
          // 节点在各状态下的样式
          nodeStateStyles: {
            // hover 状态为 true 时的样式
            hover: {
              //fill: 'lightsteelblue',
              shadowColor: '#DCDFE6',
              shadowBlur: 20
            }
          },
          modes: {
            default: ["drag-canvas", "zoom-canvas"]
          }
        })
        this.graph.data(this.nodeData)
        this.graph.changeData(this.nodeData) // 防止节点闪烁
        this.graph.render()
        setTimeout(() => { // 加载icon
          this.graph.render()
        }, 16)

        this.graph.on('node:mouseenter', e => {
          const nodeItem = e.item // 获取鼠标进入的节点元素对象
          this.graph.setItemState(nodeItem, 'hover', true) // 设置当前节点的 hover 状态为 true
        })

        this.graph.on('node:mouseleave', e => {
          const nodeItem = e.item // 获取鼠标离开的节点元素对象
          this.graph.setItemState(nodeItem, 'hover', false) // 设置当前节点的 hover 状态为 false
        })
      },
      foldItem(e, cfg, group) {
        this.$emit('fold', cfg)
      },
      clickNode(e, cfg, group) {
        this.$emit('clickNode', cfg)
      },
      openChart0(e, cfg, group) {
        this.$emit('openChart0', cfg)
      },
      openChart1(e, cfg, group) {
        this.$emit('openChart1', cfg)
      },
      openChart2(e, cfg, group) {
        this.$emit('openChart2', cfg)
      },
      openChart3(e, cfg, group) {
        this.$emit('openChart3', cfg)
      }
    },
    watch: {
      nodeData: {
        handler(newVal, oldVal){
          //console.log('new', newVal)
          this.graph.changeData(newVal)
          setTimeout(() => {
            this.graph.data(newVal)
            this.graph.render()
          }, 300)
        }
      }
    }
  }
</script>

<style>
  @import '../assets/icon.css';

  #container {
    width: 100%;
    height: 100%;
    border: 1px pink solid;
  }
</style>
